<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>SPA</title>
        <script src="../../dist/avalon.js"></script>
        <script>
            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            avalon.component('ms-number', {
                template: heredoc(function () {
                    /*
                     <div cached="true">{{@num}}<input :duplex-number="@num"/>
                     <button type="button" :on-click="@onPlus">+++</button>
                     </div>
                     */
                }),
                defaults: {
                    num: 1,
                    onPlus: function () {
                        this.num++;
                    },
                    onDispose: function () {
                        console.log('dispose')
                    }
                }
            });

            avalon.component('ms-header', {
                template: heredoc(function () {
                    /*
                     <div cached="true">
                     <h4>{{@title}}</h4>
                     <p><button type="button" :on-click="@onChangeTitle">change</button></p>
                     </div>
                     */
                }),
                defaults: {
                    title: "这是标题",
                    onChangeTitle: function (e) {
                        this.title = '改变了title' + (new Date - 0);
                    },
                    onDispose: function () {
                        console.log('dispose')
                    }
                }
            });

            var vm = avalon.define({
                $id: 'test',
                view: ''
            })
            window.addEventListener('hashchange', function (e) {
                var hash = e.newURL.split('#/')[1];
                vm.view = '<' + hash + ' cached="true" ms-widget="{$id:\'' + hash + '\'}"></' + hash + '>'
            })
        </script>
    </head>
    <body ms-controller="test">
        <ul>
            <li><a href="#/ms-header">ms-header</a></li>
            <li><a href="#/ms-number">ms-number</a></li>
        </ul>
        <div style="background-color:#f0f0f0;" ms-html="@view">

        </div>
    </body>
</html>